React フォーカス管理パターン
フォーカスを自分で管理しない
ライブラリを使う
これでも足りなかった場合、気合でフォーカスを管理することになるが、そのような状況になったときどんな感じで管理すればよいかのパターンを書いていく
前提として、role=radiogroupのような「親」とrole=radioのような「子」が存在する状態を考える
親には1つだけフォーカス可能な子があり、複数の親が並んでいる状態ではTabでそれぞれの親に順々にフォーカスが当たり、それぞれの親の中では矢印キーで操作を行う。そういうイメージ
子は、兄弟が所持しているフォーカスは奪うことができる。それ以外のフォーカスを奪ってはいけない
基本的にフォーカスは子で行う
フォーカスは(Reactの)状態ではないので、中央集権的に行うべきではない どちらかと言うと、数ある要素のうち同時に1つの要素しかフォーカスできないので、リソースとして考えたほうがいい
フォーカスを管理するための状態をReactで管理し、その管理の結果としてフォーカスに状態を反映する 具体的な状態管理の方法としては、2つの変数でフォーカスを管理する
「親」がフォーカスを所持しているか
兄弟からフォーカスを奪えるかとも言い換えることができる
能動的にフォーカスを奪っていいかどうか
親でfocusWithinを管理すると得られる
「子」がフォーカスを所持できるか
= tabindexが0であるか-1であるか
受動的にフォーカスを得てよいかどうか
この2つの条件が揃ったとき、子は初めて能動的にフォーカスを得ることができる